<template>
    <div class="top">
        <div>
            <img src="../assets/img/enterImg/hydro.png" alt="" class="hydro">
            <img src="../assets/img/enterImg/defi.png" alt="" class="defi">
        </div>
        <div>
            <img src="../assets/img/enterImg/enterApp.png" alt="" class="enterApp" @click="enterApp">
            <img :src="flag === true ?require('../assets/img/hydroImg/cat.png'):require('../assets/img/hydroImg/cat2.png')"  class="cat" @mouseenter="changeurl" @mouseleave="changeurl" @click="jump">
        </div>
    </div>
</template>

<script>
    export default {
        name: "top",
        data(){
            return{
                flag: true,
            }
        },
        methods:{
            enterApp(){
                this.$router.push({
                    name:'Show'
                })
            },
            changeurl(){
                this.flag = !this.flag
            },
            jump(){
                window.location.href = "https://github.com/hydro-offical/hydro"
            },
        }
    }
</script>

<style lang="less">
    .top{
        position: fixed;
        top: 00px;
        width: 1200px;
        display: flex;
        justify-content: space-between;
        .cat{
            width: 26px;
            height: 25px;
        }
    .hydro{
        width: 115px;
        height: 49px;
    }
    .defi{
        width: 50px;
        height: 24px;
        margin-left: 12px;
    }
    .enterApp{
        margin-right: 30px;
        width: 100px;
        height: 32px;
    }
    .githib{
        width: 26px;
        height: 25px;
    }
    }

</style>
